<template>
<view>
<!--pages/searchHotel/searchHotel.wxml-->
<!--<import src="template.wxml"></import>-->

<view class="pageHeader">
     <view class="searchHeader">
          <text class="location" @tap="locationTap">{{location}}</text>
          <image src="/static/res/images/ic_down_arrow.png" mode="aspectFit" style="width:20rpx;height:20rpx;"></image>
          <clear-input style="flex:1" inputHint="搜索酒店" icon-class="common_search_img" input-class="common_search_input" confirmType="search" @inputConfirm="searchEvent"></clear-input>
     </view>

     <view class="filterView">
          <view class="filterOptions">
               <text :class="shownavindex == 1? 'filterActive' : 'filterItem'" @tap="filterMenuTap" data-index="1">推荐</text>
               <view :class="shownavindex == 2? 'filterActive' : 'filterItem'" @tap="filterMenuTap" data-index="2">
                    <text>价格</text>
                    <view :class="priceL2H?'arrowUp':'arrowDown'"></view>
               </view>
               <!-- <text :class="shownavindex == 3? 'filterActive' : 'filterItem'" @tap="filterMenuTap" data-index="3">好评</text> -->
              <!-- <text :class="shownavindex == 4? 'filterActive' : 'filterItem'" @tap="filterMenuTap" data-index="4">距离</text> -->
          </view>
          <!-- <view class="filterMenu" @tap="filterTap">
               <text class="title">筛选</text>
               <image src="/static/res/images/ic_hotel_filter.png" mode="aspectFit" class="icon"></image>
          </view> -->
     </view>
</view>

<view class="hotelListContent">
     <block data-type="template" data-is="hotelListItem" data-attr="imageUrl:item.image,hotelName:item.name,score:item.score,services:item.service,address:item.address,distance:item.distance,price:item.price" v-for="(item, index) in hotelArray" :key="index">
     <navigator class="hotelListItem" :url="'../hotelDetail/hotelDetail?id=' + item.id">
          <image class="image" mode="scaleToFill" :src="item.image"></image>

          <view class="content">
               <text class="hotelName">{{item.name}}</text>
               <view class="scoreItem">
                    <text class="score">{{Math.round(item.score*100)/100}}分</text>
                    <text class="services">{{item.service}}</text>
               </view>
               <view class="scoreItem">
                    <image src="/static/res/images/ic_city_location.png" style="width:24rpx;height:24rpx;margin-right:10rpx;"></image>
                    <text class="address">{{item.address}}</text>
               </view>
          </view>

          <view class="priceItem">
               <text class="price">¥</text>
               <text class="price">{{item.price}}</text>
               <text class="priceTip">起</text>
          </view>
     </navigator>
</block>

     <view v-if="loadenable" class="loadmore">
          <image src="/static/res/images/loading.gif" class="loading" mode="scaleToFill" style="margin:auto 0;"></image>
          <text style="margin-left:20rpx;">正在加载更多</text>
     </view>
     <text v-else class="loadmore">没有更多了</text>
</view>
</view>
</template>

<script>
// pages/searchHotel/searchHotel.js
const db = uniCloud.database()
const dbCmd = db.command
import clearInput from "../../components/clearInput/clearInput";

export default {
  data() {
    return {
      location: '',
			number: '',
			district: '',
			hotelInit:[],
			hotelPrice:[],
      hotelArray: [],
      loadenable: true,
      shownavindex: 1,
      priceL2H: true,
			
    };
  },

  components: {
    clearInput
  },
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
		let {location , number , district} = options
		this.location = location
		this.number = number
		this.district = district
		this.searchHotel()
  },
	
	onShow(){
		this.searchHotel()
	},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

    wx: setTimeout(()=>{
      this.searchHotel()
      uni.showToast({
        title: '刷新成功',
        duration: 1500
      });
      uni.stopPullDownRefresh();
    }, 2000);
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},
	
  methods: {
		searchHotel(type){
			// 推荐情况下
			uniCloud.callFunction({
				name: 'searchHotel',
				data: {location:this.location , number:this.number , district:this.district},
				success: (res) => {
					this.hotelInit = res.result.data
					this.hotelArray = res.result.data
					console.log(this.hotelArray)
				},
				complete: () => {
					this.loadenable = false
				}
			})
		},
		
		// 价格排序下
		priceHotel(){
			uniCloud.callFunction({
				name: 'searchHotel',
				data: {location:this.location , number:this.number , district:this.district,type:1},
				success: (res) => {
					console.log(res)
					this.hotelPrice = res.result.data
					this.hotelArray = res.result.data
				},
				complete: () => {
					this.loadenable = false
				}
			})
		},
		
    filterMenuTap(e) {
      var index = e.currentTarget.dataset.index;
      this.shownavindex = index

      if (index == 2 && this.hotelPrice.length == 0) {
				this.priceHotel()
        this. priceL2H = !this.priceL2H
      }else if(index == 2){
				this.hotelArray = JSON.parse(JSON.stringify(this.hotelPrice.reverse()))
        this. priceL2H = !this.priceL2H
			}else {
				this.hotelArray = this.hotelInit
        this.priceL2H = true
      }
    },
		
    filterTap: function () {
      uni.navigateTo({
        url: '../hotelFilter/hotelFilter'
      });
    },
		
    locationTap: function () {
      uni.navigateTo({
        url: '../select_city/select_city'
      });
    },
		
		/**
		   * 搜索民宿
		   */
		  searchEvent(e) {
				this.hotelArray=[]
				this.loadenable = true
				uniCloud.callFunction({
					name: 'searchHotel',
					data: {hotelName:e.detail.value,type:2},
					success: (res) => {
						console.log(res)
						this.hotelArray = res.result.data
					},
					complete: () => {
						this.loadenable = false
					}
				})
			}
  }
};
</script>
<style>
/* pages/searchHotel/searchHotel.wxss */
 
Page {
     width: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     position: relative;
}

.pageHeader {
     width: 100%;
     position: fixed;
     display: flex;
     background: #fff;
     top: 0;
     flex-direction: column;
     z-index: 10;
}

.hotelListItem {
     width: 100%;
     height: 172rpx;
     padding: 16rpx;
     display: flex;
     flex-direction: row;
     align-items: center;
     position: relative;
     border-bottom: 1rpx solid #ccc;
     box-sizing: border-box;
}

.hotelListItem .image {
     width: 140rpx;
     height: 140rpx;
     /* border-radius: 20rpx; */
     margin-right: 16rpx;
}

.hotelListItem .content {
     display: flex;
     flex-direction: column;
     position: absolute;
     left: 166rpx;
     right: 16rpx;
     top: 16rpx;
     bottom: 16rpx;
}

.content .scoreItem {
     display: flex;
     flex: 1;
     flex-direction: row;
     align-items: center;
}

.content .hotelName {
     font-size: 30rpx;
     font-weight: bold;
     color: black;
     flex: 1;
}

.content .scoreItem .score {
     font-size: 35rpx;
     font-weight: bold;
     color: #3e8fc7;
}

.content .scoreItem .services {
     font-size: 24rpx;
     color: #777;
     margin-left: 10rpx;
     background: #eef8fe;
     padding: 2rpx 8rpx;
     border-radius: 15rpx;
}

.content .scoreItem .address {
     font-size: 24rpx;
     color: #777;
}

.priceItem {
     /*让文字沉底的方法 */
     display: table-cell;
     vertical-align: bottom;
     position: absolute;
     right: 16rpx;
     bottom: 16rpx;
}

.priceItem .price {
     font-size: 35rpx;
     font-weight: bold;
     color: #ff1d1d;
}

.priceItem .priceTip {
     font-size: 24rpx;
     color: #3f3f3f;
}

.searchHeader {
     width: 100%;
     height: 90rpx;
     box-sizing: border-box;
     background: #f2f2f2;
     display: flex;
     padding: 0 10rpx 0 20rpx;
     flex-direction: row;
     align-items: center;
}

.searchHeader .location {
     font-size: 24rpx;
     color: #666;
     margin-right: 6rpx;
}

.filterView {
     width: 100%;
     height: 76rpx;
     align-items: center;
     background: white;
     display: flex;
     flex-direction: row;
     border-bottom: 1rpx #dedede solid;
}

.filterOptions {
     width: 100%;
     display: flex;
     flex-direction: row;
     align-items: center;
}

.filterItem, .filterActive {
     flex: 1;
     font-size: 26rpx;
     text-align: center;
     display: flex;
     align-items: center;
     justify-content: center;
}

.filterItem {
     color: #666;
}

.filterActive {
     color: #e55509;
}

.arrowUp, .arrowDown {
     display: inline-block;
     border: 5px solid transparent;
     margin-left: 5px;
}

.filterItem .arrowUp, .filterItem .arrowDown {
     border-bottom: 5px solid #666;
     border-top: 0;
}

.filterActive .arrowUp {
     border-bottom: 0;
     border-top: 5px solid #e55509;
}

.filterActive .arrowDown {
     border-bottom: 5px solid #e55509;
     border-top: 0;
}

.filterMenu {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
     border-left: 1rpx solid #979797;
     width: 220rpx;
}

.filterMenu .title {
     font-size: 26rpx;
     color: #666;
}

.filterMenu .icon {
     width: 24rpx;
     height: 24rpx;
     margin-left: 6rpx;
}

.hotelListContent {
     width: 100%;
     position: absolute;
     top: 166rpx;
     left: 0;
     right: 0;
     bottom: 0;
     background: white;
}

</style>